<template>
	<view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="150" align="center">设备名</uni-th>
					<uni-th width="150" align="center">设备详情</uni-th>
					<uni-th align="center" :formatter="timeFormatter">创建时间</uni-th>
					<uni-th width="150" align="center">连接</uni-th>
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in equipmentList?.records" :key="index">
					<uni-td>{{ item.equipmentName }}</uni-td>
					<uni-td>
						<view class="name">{{ item.equipmentDes }}</view>
					</uni-td>
					<uni-td align="center">{{ item.createTime }}</uni-td>
					<uni-td v-if="item.connected==true">已连接</uni-td>
          <uni-td v-else="item.connected==false">未连接</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="getclick()">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
		</view>
	</view>
</template>

<script setup lang="ts">
// import tableData from './tableData.js'
import { onMounted, reactive, ref } from 'vue';
import { addEquipment, deleteEquipment, listEquipment } from '../../api/equipment/equipment';
import type { AddEquipmentParam, DeleteEquipmentParam, Equipment, ListParam, ListResponse } from '../../api/types';
const selectedIndexs = ref([]);
const searchVal = ref('');
const equipmentList = ref<ListResponse<Equipment>>()
const param: ListParam = reactive({
    name: "",
    index: 0,
    pageSize: 10
})
const tableData = [];
const pageSize = ref(10);
const pageCurrent = ref(1);
const total = ref(0);
const loading = ref(false);

const selectedItems = () => selectedIndexs.value.map(i => tableData.value[i]);

const selectionChange = (e) => {
    console.log(e.detail.index);
    selectedIndexs.value = e.detail.index;
};

const delTable = () => {
    console.log(selectedItems());
};

const change = (e) => {
    $refs.table.clearSelection();
    selectedIndexs.value.length = 0;
    getData(e.current);
};

const search = () => {
    getData(1, searchVal.value);
};

const getData = (pageCurrent, value = '') => {
    loading.value = true;
    pageCurrent.value = pageCurrent;
    request({
        pageSize: pageSize.value,
        pageCurrent: pageCurrent,
        value: value,
        success: res => {
            tableData.value = res.data;
            total.value = res.total;
            loading.value = false;
        }
    });
};

const request = (options) => {
    const { pageSize, pageCurrent, success, value } = options;
    let total = tableData.length;
    let data = tableData.filter((item, index) => {
        const idx = index - (pageCurrent - 1) * pageSize;
        return idx < pageSize && idx >= 0;
    });
    if (value) {
        data = [];
        tableData.forEach(item => {
            if (item.name.indexOf(value) !== -1) {
                data.push(item);
            }
        });
        total = data.length;
    }

    setTimeout(() => {
        typeof success === 'function' &&
            success({
                data: data,
                total: total
            });
    }, 500);
};
const getEquipmentList = async (param: ListParam) => {
    try {
        const res = await listEquipment(param)
        if (res.code == 200) {
            equipmentList.value = res.data
            console.log(equipmentList.value?.records[0])
        }

    } catch {

    }
}
const timeFormatter = (row: Equipment, column: any, cellValue: string | number | Date, index: number) => {
    let format = 'YYYY-mm-dd HH:MM:SS'
    let date = new Date(cellValue);
    const dataItem = {
        'Y+': date.getFullYear().toString(),
        'm+': (date.getMonth() + 1).toString(),
        'd+': date.getDate().toString(),
        'H+': date.getHours().toString(),
        'M+': date.getMinutes().toString(),
        'S+': date.getSeconds().toString(),
    };
    Object.keys(dataItem).forEach((item) => {
        const ret = new RegExp(`(${item})`).exec(format);
        if (ret) {
            // @ts-ignore
            format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
        }
    });
    return format
}
const getclick = () => {
    console.log(111)
    
  }
onMounted(() => {
    getEquipmentList(param)
    // getEmqxClients()
})
</script>

<style>
.uni-container {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .uni-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
  }
  uni-th, uni-td {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
  }
  uni-th {
    background-color: #f7f7f7;
    font-weight: bold;
  }
  .uni-button {
    margin: 0 5px;
  }
  .uni-pagination-box {
    margin-top: 20px;
    text-align: center;
  }
  .name {
    font-size: 14px;
    color: #333;
  }
  /* 响应式设计 */
  @media (max-width: 768px) {
    .uni-container {
      padding: 10px;
    }
    .uni-table {
      font-size: 14px;
    }
    .uni-button {
      padding: 0 5px;
      font-size: 12px;
    }
  }
</style>
